<template>
    <div style="padding:10px;display: flex;flex-direction: column;width: 100%;height: 100%;">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 10px 0;"> </div>
        <div :style="Object.assign({ width: '100%' }, $attrs['content-style'])">
            <el-checkbox-group style="display: flex;flex-wrap: wrap;width: 100%;" v-model="checkedItems"
                @change="handleCheckedItemChange" v-bind="$attrs">
                <el-checkbox @change="(val) => itemChange(val, item)" style="display: flex; align-items: center;"
                    :style="Object.assign({ width: '100px', margin: '0 10px 10px 0' }, $attrs['item-style'])"
                    v-for="(item, index) in items" :value="item" :label="item.label" :key="item.value + index"
                    v-bind="item.attrs">
                    <slot :info="item">
                        <div :title="item.label" :style="getWidth()"
                            style="height: 100% ;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"
                            v-text="item.label">
                        </div>
                    </slot>
                </el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
export default {
    name: 'g-check-all',
    props: {
        items: {
            type: Array,
            default: () => []
        },
        value: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            checkAll: false,
            checkedItems: [],
            isIndeterminate: false,
        };
    },
    methods: {
        getWidth() {
            let width = this.$attrs['item-style']?.width;
            if (width) {
                return `width:calc(${width} - 24px)`;
            } else {
                return 'width:76px';
            }
        },
        handleCheckAllChange(val) {
            this.checkedItems = val ? this.items.map(a => a.label) : [];
            this.isIndeterminate = false;
            this.$emit('check-all', val);
            this.$emit('input', this.checkedItems);
        },
        handleCheckedItemChange(val) {
            let checkedCount = val.length;
            this.checkAll = checkedCount === this.items.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.items.length;
            let returnCheckedItems = this.items.filter(a => val.includes(a.label));
            this.$emit('input', val);
            this.$emit('change', val, returnCheckedItems);
        },
        itemChange(val, item) {
            this.$emit("item-change", val, item);
        }
    },
    mounted() {
        this.checkedItems = this.value;
        let checkedCount = this.checkedItems.length;
        this.checkAll = checkedCount === this.items.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.items.length;
    }
}
</script>

<style lang="scss" scoped></style>